<template>
	<el-dialog :title="$t('designer.setting.tableData')" :width="1200" destroy-on-close @closed="$emit('closed')">
		<sc-code-editor ref="editor" v-model="thisTableData" mode="javascript" theme="darcula" :height="200"></sc-code-editor>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="$emit('closed')">
					{{ $t('designer.hint.cancel') }}
				</el-button>
				<el-button type="primary" @click="saveTableData">
					{{ $t('designer.hint.confirm') }}
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>
<script>
import { defineAsyncComponent } from 'vue';
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));
export default {
	name: 'table-data-edit',
	props: {
		tableData: Object
	},
	components: {
		scCodeEditor
	},
	data(){
		return {
			thisTableData:JSON.stringify(this.tableData)
		}
	},
	watch: {
		'tableData': {
			handler(val) {
				if (val) {
					this.thisTableData = JSON.stringify(val)
				}
			}
		},
	},
	mounted() {
	},
	methods:{
		saveTableData()
		{
			var v = this.$refs.editor.coder.getValue();
			this.$emit('success', JSON.parse(v))
		}
	}
}
</script>
